<template>
  <section class="home-wrapper">
    <!-- 上层 -->
    <section class="top-wrapper">
      <!-- 左边部分 -->
      <div class="sider-box left-box">
        <div class="item-box"></div>
        <div class="item-box"></div>
      </div>
      <!-- 中间部分 -->
      <div class="middle-box"></div>
      <!-- 右边部分 -->
      <div class="sider-box right-box">
        <div class="item-box"></div>
        <div class="item-box"></div>
      </div>
    </section>
    <!-- 下层 -->
    <section class="bottom-wrapper">
      <!-- 左边部分 -->
      <div class="other-box">
        <div class="item-box"></div>
        <div class="item-box"></div>
      </div>
      <!-- 右边部分 -->
      <div class="sider-box right-box"></div>
    </section>
  </section>
</template>

<script>
import navbar from "../../components/navbar.vue";
export default {
  name: "Home",
  components: {
    navbar,
  },
};
</script>

<style lang="scss">
// 宽度变量
$topMiddelWidth: 50%;
$siderMargin: 10px;
$siderWidth: calc((100% - #{$topMiddelWidth}) / 2 - 2 * #{$siderMargin});
$bottomLeftWidth: calc(100% - #{$siderWidth} - 2 * #{$siderMargin});
$bottomLeftItemWidth: calc(#{$bottomLeftWidth} - 2 * #{$siderMargin});
// 高度变量
// $siderHeight:10px;
$topMiddleHeight: calc(66% - 2 * #{$siderMargin});
$siderHeight: calc((100% - #{$siderMargin}) / 2);
// 公用样式类
.sider-box {
  width: $siderWidth;
}
// 主要样式
.home-wrapper {
  height: calc(100vh - 60px);
  width: 100%;
  background: url("../../assets/images/homeBg.png") no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  .top-wrapper {
    display: flex;
    height: $topMiddleHeight;
    margin: $siderMargin 0;
    // 两侧的部分
    .sider-box {
      @extend .sider-box;
      .item-box {
        height: $siderHeight;
        margin-bottom: $siderMargin;
        // background: pink;
        background: url("../../assets/images/boxBg-1.png") no-repeat;
        background-size: 100% 100%;

        &:last-child {
          margin: 0;
        }
      }
    }
    .left-box {
      margin-right: auto;
      margin-left: $siderMargin;
    }
    .right-box {
      margin-left: auto;
      margin-right: $siderMargin;
    }
    // 左边部分
    // 中间部分
    .middle-box {
      width: $topMiddelWidth;
      background: url("../../assets/images/boxBg-2.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .bottom-wrapper {
    display: flex;
    height: 33%;
    .sider-box {
      @extend .sider-box;
      margin-left: auto;
      margin-right: $siderMargin;
      background: url("../../assets/images/boxBg-1.png") no-repeat;
      background-size: 100% 100%;
    }
    .other-box {
      display: flex;
      width: $bottomLeftWidth;
      .item-box {
        width: $bottomLeftItemWidth;
        background: url("../../assets/images/boxBg-3.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 $siderMargin;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>